<default-header class="top-header"></default-header>
<div class="wrap no-sidebar">
  <div class="sidebar-left collapse navbar-collapse navbar-collapse-2">
    <navbar-utility-mobile></navbar-utility-mobile>
  </div>
  <div class="middle">
    <!-- Middle section -->
    <div class="middle-section surface-shaded">
      <div class="middle-container has-scroll">
        <div class="middle-content">

            <div ng-if="!showGetStarted" class="container surface-shaded"> <!-- Safari needs surface-shaded at mobile -->
            <div ng-if="(projects | hashSize) === 0" class="text-muted" style="margin-top: 50px;">{{'Loading'| translate}}...</div>
            <div ng-if="(projects | hashSize) !== 0" class="gutter-top">
              <h1 style="display: inline-block;">{{'Projects'| translate}}</h1>
              <a ng-if="canCreate" href="create-project" style="margin-top: 10px;" class="btn btn-lg btn-primary pull-right">{{'NewProject'| translate}}</a>
              <alerts alerts="alerts"></alerts>
              <div ng-repeat="project in projects | orderByDisplayName">
                <div row flex cross-axis="center" class="tile tile-project tile-click tile-flex">
                  <div flex class="project-summary">
                    <h2 class="project truncate">
                      <a class="tile-target" href="project/{{project.metadata.name}}">{{(project | uniqueDisplayName : projects)}}</a>
                      <span ng-if="project.status.phase != 'Active'" data-toggle="tooltip" data-placement="right" title="This project has been marked for deletion." class="pficon pficon-warning-triangle-o" style="cursor: help; vertical-align: top; margin-left: 5px;"></span>
                    </h2>
                    <div class="muted" style="margin-top: -5px;" ng-if="project | description">
                      <truncate-long-text content="project | description" limit="512" use-word-boundary="true"></truncate-long-text>
                    </div>
                  </div>
                  <div row flex main-axis="end" class="project-delete" ng-if="project.status.phase == 'Active'">
                    <delete-link
                      class="fa-lg"
                      resource-type="project"
                      resource-name="{{project.metadata.name}}"
                      project-name="{{project.metadata.name}}"
                      display-name="{{(project | displayName)}}"
                      alerts="alerts"
                      button-only>
                    </delete-link>
                  </div>
                </div>
              </div>
              <div ng-if="canCreate === false" style="margin-top: 10px;">
                <span ng-if="!newProjectMessage">A cluster admin can create a project for you by running the command
                  <code>oadm new-project &lt;projectname&gt; --admin={{user.metadata.name || '&lt;YourUsername&gt;'}}</code></span>
                <span ng-if="newProjectMessage" ng-bind-html="newProjectMessage | linky" style="white-space:pre;"></span>
              </div>
              <div style="margin-top: 10px;">
               {{'Aclusteradmin' | translate}}
                <code>oc policy add-role-to-user admin {{user.metadata.name || '&lt;YourUsername&gt;'}} -n &lt;{{'projectname' | translate}}&gt;</code>
              </div>
            </div>
          </div>

          <div ng-if="showGetStarted" class="empty-state-message empty-state-full-page text-center">
            <h1>Welcome to OpenShift.</h1>

            <p>
              OpenShift helps you quickly develop, host, and scale applications.<br>
              <span ng-if="canCreate">Create a project for your application.</span>
            </p>

            <a ng-if="canCreate" href="create-project" class="btn btn-lg btn-primary">New Project</a>

            <p>To learn more, visit the OpenShift <a ng-href="{{'' | helpLink}}">documentation</a>.</p>

            <p ng-if="canCreate === false">
              <span ng-if="!newProjectMessage">{{'Aclusteradmin' | translate}}<br>
                <code>oadm new-project &lt;{{'projectname' | translate}}&gt; --admin={{user.metadata.name || '&lt;YourUsername&gt;'}}</code></span>
              <span ng-if="newProjectMessage" ng-bind-html="newProjectMessage | linky" style="white-space:pre;"></span>
            </p>

          </div>

        </div><!-- /middle-content -->
      </div><!-- /middle-container -->
    </div><!-- /middle-section -->
  </div><!-- /middle -->
</div><!-- /wrap -->
